<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小说平台 - 读者/作者登录</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Microsoft YaHei', sans-serif;
    }

    body {
      background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
      color: #333;
      line-height: 1.6;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .login-container {
      background: white;
      border-radius: 15px;
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
      width: 100%;
      max-width: 500px;
      overflow: hidden;
    }

    .banner {
      background: linear-gradient(to right, #1e3c72, #2a5298);
      color: white;
      padding: 30px 20px;
      text-align: center;
      position: relative;
    }

    .logo {
      font-size: 2.5rem;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .tagline {
      font-size: 1.2rem;
      opacity: 0.9;
      margin-bottom: 15px;
    }

    /* 身份切换按钮 */
    .role-switch {
      display: flex;
      background: rgba(255, 255, 255, 0.15);
      border-radius: 50px;
      margin: 10px auto 0;
      width: fit-content;
    }

    .role-btn {
      padding: 8px 25px;
      border-radius: 50px;
      font-size: 1rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .role-btn.active {
      background: white;
      color: #1e3c72;
    }

    .role-btn:not(.active):hover {
      background: rgba(255, 255, 255, 0.25);
    }

    .login-content {
      padding: 30px;
      position: relative;
    }

    .login-title {
      text-align: center;
      margin-bottom: 25px;
      color: #1e3c72;
      font-size: 1.8rem;
    }

    /* 表单切换动画 */
    .form-container {
      position: relative;
      min-height: 380px;
    }

    .login-form {
      transition: all 0.3s ease;
      opacity: 1;
      transform: translateY(0);
    }

    .login-form.hidden {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      opacity: 0;
      transform: translateY(-20px);
      pointer-events: none;
    }

    /* 表单样式 */
    .form-group {
      margin-bottom: 20px;
    }

    label {
      display: block;
      margin-bottom: 8px;
      font-weight: bold;
      color: #444;
      font-size: 0.95rem;
    }

    input {
      width: 100%;
      padding: 14px 15px;
      border: 1px solid #ddd;
      border-radius: 8px;
      font-size: 1rem;
      transition: all 0.3s;
    }

    input:focus {
      outline: none;
      border-color: #1e3c72;
      box-shadow: 0 0 0 3px rgba(30, 60, 114, 0.2);
    }

    /* 按钮样式 */
    .btn {
      padding: 14px;
      border: none;
      border-radius: 50px;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.3s ease;
      font-size: 1.1rem;
      letter-spacing: 0.5px;
      text-align: center;
      display: block;
      width: 100%;
      margin: 10px 0;
    }

    .btn-primary {
      background: linear-gradient(to right, #1e3c72, #2a5298);
      color: white;
    }

    .btn-author {
      background: linear-gradient(to right, #8E44AD, #9B59B6);
      color: white;
    }

    .btn-secondary {
      background: #f1f3f6;
      color: #1e3c72;
      border: 1px solid #d0d0d0;
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    }

    .additional-options {
      display: flex;
      justify-content: space-between;
      margin: 15px 0;
      font-size: 0.95rem;
    }

    .remember-me {
      display: flex;
      align-items: center;
    }

    .remember-me input {
      width: auto;
      margin-right: 8px;
    }

    .forgot-password {
      color: #1e3c72;
      text-decoration: none;
      font-weight: 500;
    }

    .divider {
      text-align: center;
      position: relative;
      margin: 25px 0;
      color: #666;
    }

    .divider::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      height: 1px;
      background: #ddd;
    }

    .divider span {
      background: white;
      padding: 0 15px;
      position: relative;
      z-index: 2;
    }

    .footer {
      text-align: center;
      color: #666;
      font-size: 0.9rem;
      padding-top: 15px;
      border-top: 1px solid #eee;
      margin-top: 20px;
    }

    .message {
      padding: 12px;
      border-radius: 8px;
      margin: 15px 0;
      text-align: center;
      font-weight: bold;
      display: none;
    }

    .success {
      background: #e8f5e9;
      color: #2e7d32;
    }

    .error {
      background: #ffebee;
      color: #c62828;
    }

    .role-description {
      background: #f8f9fa;
      border-radius: 8px;
      padding: 15px;
      margin: 15px 0;
      border-left: 3px solid #1e3c72;
    }

    .role-highlight {
      font-weight: 600;
      color: #1e3c72;
    }

    @media (max-width: 500px) {
      .login-container {
        width: 95%;
      }
      
      .login-content {
        padding: 25px 15px;
      }
      
      .banner {
        padding: 25px 15px;
      }
      
      .role-btn {
        padding: 8px 15px;
        font-size: 0.95rem;
      }
    }
  </style>
</head>
<body>
  <div class="login-container">
    <div class="banner">
      <div class="logo">书海阁</div>
      <div class="tagline">开启您的阅读与创作之旅</div>
      <div class="role-switch">
        <div class="role-btn active" data-role="reader">读者登录</div>
        <div class="role-btn" data-role="author">作者登录</div>
      </div>
    </div>

    <div class="login-content">
      <h2 class="login-title" id="roleTitle">读者登录</h2>
      
      <div class="role-description">
        <div id="roleDescription">欢迎回来，亲爱的读者！登录您的账号，继续沉浸在精彩的小说世界中</div>
      </div>
      
      <div class="form-container">
        <!-- 读者登录表单 -->
        <div id="readerLogin" class="login-form">
          <div id="readerLoginMessage" class="message"></div>
          <div class="form-group">
            <label for="email"><i class="fas fa-envelope"></i> 邮箱</label>
            <input type="email" id="email" placeholder="reader@example.com" required>
          </div>
          
          <div class="form-group">
            <label for="password"><i class="fas fa-lock"></i> 密码</label>
            <input type="password" id="password" placeholder="请输入密码" required>
          </div>
          
          <div class="additional-options">
            <div class="remember-me">
              <input type="checkbox" id="rememberMe" checked>
              <label for="rememberMe">记住我</label>
            </div>
            <a href="#" class="forgot-password">忘记密码?</a>
          </div>
          
          <button type="button" class="btn btn-primary" id="readerLoginBtn">
            <i class="fas fa-book-reader"></i> 读者登录
          </button>
          
          <button type="button" class="btn btn-secondary" id="showReaderRegisterBtn">
            <i class="fas fa-user-plus"></i> 注册读者账号
          </button>
        </div>
        
        <!-- 读者注册表单 -->
        <div id="readerRegister" class="login-form hidden">
          <div id="readerRegisterMessage" class="message"></div>
          <div class="form-group">
            <label for="readerName"><i class="fas fa-user"></i> 读者名</label>
            <input type="text" id="readerName" placeholder="设置您的读者名" required>
          </div>
          
          <div class="form-group">
            <label for="readerEmail"><i class="fas fa-envelope"></i> 邮箱</label>
            <input type="email" id="readerEmail" placeholder="reader@example.com" required>
          </div>
          
          <div class="form-group">
            <label for="readerPassword"><i class="fas fa-lock"></i> 密码</label>
            <input type="password" id="readerPassword" placeholder="至少6位字符" required minlength="6">
          </div>
          
          <div class="form-group">
            <label for="readerConfirmPassword"><i class="fas fa-lock"></i> 确认密码</label>
            <input type="password" id="readerConfirmPassword" placeholder="请再次输入密码" required minlength="6">
          </div>
          
          <button type="button" class="btn btn-primary" id="readerRegisterBtn">
            <i class="fas fa-check-circle"></i> 注册读者账号
          </button>
          
          <button type="button" class="btn btn-secondary" id="backToReaderLoginBtn">
            <i class="fas fa-arrow-left"></i> 返回登录
          </button>
        </div>
        
        <!-- 作者登录表单 -->
        <div id="authorLogin" class="login-form hidden">
          <div id="authorLoginMessage" class="message"></div>
          <div class="form-group">
            <label for="authorEmail"><i class="fas fa-envelope"></i> 作者邮箱</label>
            <input type="email" id="authorEmail" placeholder="author@example.com" required>
          </div>
          
          <div class="form-group">
            <label for="authorPassword"><i class="fas fa-lock"></i> 作者密码</label>
            <input type="password" id="authorPassword" placeholder="请输入密码" required>
          </div>
          
          <div class="additional-options">
            <div class="remember-me">
              <input type="checkbox" id="rememberAuthor" checked>
              <label for="rememberAuthor">记住我</label>
            </div>
            <a href="#" class="forgot-password">忘记密码?</a>
          </div>
          
          <button type="button" class="btn btn-author" id="authorLoginBtn">
            <i class="fas fa-feather-alt"></i> 作者登录
          </button>
          
          <button type="button" class="btn btn-secondary" id="showAuthorRegisterBtn">
            <i class="fas fa-user-plus"></i> 注册作者账号
          </button>
        </div>
        
        <!-- 作者注册表单 -->
        <div id="authorRegister" class="login-form hidden">
          <div id="authorRegisterMessage" class="message"></div>
          <div class="form-group">
            <label for="authorName"><i class="fas fa-user"></i> 笔名</label>
            <input type="text" id="authorName" placeholder="设置您的创作笔名" required>
          </div>
          
          <div class="form-group">
            <label for="authorEmailReg"><i class="fas fa-envelope"></i> 邮箱</label>
            <input type="email" id="authorEmailReg" placeholder="author@example.com" required>
          </div>
          
          <div class="form-group">
            <label for="authorPasswordReg"><i class="fas fa-lock"></i> 密码</label>
            <input type="password" id="authorPasswordReg" placeholder="至少8位字符" required minlength="8">
          </div>
          
          <div class="form-group">
            <label for="authorConfirmPassword"><i class="fas fa-lock"></i> 确认密码</label>
            <input type="password" id="authorConfirmPassword" placeholder="请再次输入密码" required minlength="8">
          </div>
          
          <div class="form-group">
            <label for="authorBio"><i class="fas fa-pen"></i> 作者简介</label>
            <textarea id="authorBio" rows="2" placeholder="简单的介绍一下自己..."></textarea>
          </div>
          
          <button type="button" class="btn btn-author" id="authorRegisterBtn">
            <i class="fas fa-check-circle"></i> 注册作者账号
          </button>
          
          <button type="button" class="btn btn-secondary" id="backToAuthorLoginBtn">
            <i class="fas fa-arrow-left"></i> 返回登录
          </button>
        </div>
      </div>
      
      <div class="footer">
        <p>© 2023 书海阁小说平台 | <a href="#" style="color: #1e3c72;">服务条款</a> | <a href="#" style="color: #1e3c72;">隐私政策</a></p>
      </div>
    </div>
  </div>

  <script>
    // 全局变量记录当前角色状态
    let currentRole = 'reader';
    let currentForm = 'login';
    
    // 切换角色函数
    function switchRole(role) {
      // 更新按钮状态
      document.querySelectorAll('.role-btn').forEach(btn => {
        btn.classList.remove('active');
      });
      event.currentTarget.classList.add('active');
      
      // 更新角色信息
      currentRole = role;
      document.getElementById('roleTitle').textContent = 
        role === 'reader' ? '读者登录' : '作者登录';
      
      // 更新角色描述
      const description = document.getElementById('roleDescription');
      if(role === 'reader') {
        description.innerHTML = '欢迎回来，亲爱的读者！登录您的账号，继续沉浸在精彩的小说世界中';
      } else {
        description.innerHTML = '作家您好！请登录管理您的作品，发布新章节，并与读者互动交流';
      }
      
      // 切换到对应角色的登录表单
      if(currentForm === 'login') {
        showLoginForm(role);
      } else {
        showRegisterForm(role);
      }
    }
    
    // 显示登录表单
    function showLoginForm(role) {
      // 隐藏所有表单
      document.querySelectorAll('.login-form').forEach(form => {
        form.classList.add('hidden');
      });
      
      // 显示当前角色的登录表单
      const loginForm = document.getElementById(`${role}Login`);
      loginForm.classList.remove('hidden');
      
      currentForm = 'login';
    }
    
    // 显示注册表单
    function showRegisterForm(role) {
      // 隐藏所有表单
      document.querySelectorAll('.login-form').forEach(form => {
        form.classList.add('hidden');
      });
      
      // 显示当前角色的注册表单
      const registerForm = document.getElementById(`${role}Register`);
      registerForm.classList.remove('hidden');
      
      currentForm = 'register';
    }
    
    // 设置角色切换事件
    document.querySelectorAll('.role-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        const role = this.getAttribute('data-role');
        switchRole(role);
      });
    });
    
    // 读者显示注册表单
    document.getElementById('showReaderRegisterBtn').addEventListener('click', function() {
      showRegisterForm('reader');
    });
    
    // 读者返回登录
    document.getElementById('backToReaderLoginBtn').addEventListener('click', function() {
      showLoginForm('reader');
    });
    
    // 作者显示注册表单
    document.getElementById('showAuthorRegisterBtn').addEventListener('click', function() {
      showRegisterForm('author');
    });
    
    // 作者返回登录
    document.getElementById('backToAuthorLoginBtn').addEventListener('click', function() {
      showLoginForm('author');
    });
    
    // 读者登录功能
    document.getElementById('readerLoginBtn').addEventListener('click', function() {
      const email = document.getElementById('email').value;
      const password = document.getElementById('password').value;
      const message = document.getElementById('readerLoginMessage');
      
      // 显示加载状态
      const loginBtn = this;
      const originalText = loginBtn.innerHTML;
      loginBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 登录中...';
      loginBtn.disabled = true;
      
      // 验证表单
      if(!email || !password) {
        message.textContent = '请输入邮箱和密码';
        message.className = 'message error';
        message.style.display = 'block';
        loginBtn.innerHTML = originalText;
        loginBtn.disabled = false;
        return;
      }
      
      // 模拟登录过程
      setTimeout(() => {
        message.textContent = '读者登录成功！即将进入读者中心';
        message.className = 'message success';
        message.style.display = 'block';
        
        // 跳转到用户中心页面
        setTimeout(() => {
          window.location.href = 'user.html?role=reader';
        }, 1500);
      }, 1200);
    });
    
    // 作者登录功能
    document.getElementById('authorLoginBtn').addEventListener('click', function() {
      const email = document.getElementById('authorEmail').value;
      const password = document.getElementById('authorPassword').value;
      const message = document.getElementById('authorLoginMessage');
      
      // 显示加载状态
      const loginBtn = this;
      const originalText = loginBtn.innerHTML;
      loginBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 登录中...';
      loginBtn.disabled = true;
      
      // 验证表单
      if(!email || !password) {
        message.textContent = '请输入邮箱和密码';
        message.className = 'message error';
        message.style.display = 'block';
        loginBtn.innerHTML = originalText;
        loginBtn.disabled = false;
        return;
      }
      
      // 模拟登录过程
      setTimeout(() => {
        message.textContent = '作者登录成功！即将进入作者中心';
        message.className = 'message success';
        message.style.display = 'block';
        
        // 跳转到作者中心
        setTimeout(() => {
          window.location.href = 'author.html?role=author';
        }, 1500);
      }, 1200);
    });
    
    // 读者注册功能
    document.getElementById('readerRegisterBtn').addEventListener('click', function() {
      const name = document.getElementById('readerName').value;
      const email = document.getElementById('readerEmail').value;
      const password = document.getElementById('readerPassword').value;
      const confirmPassword = document.getElementById('readerConfirmPassword').value;
      const message = document.getElementById('readerRegisterMessage');
      
      // 显示加载状态
      const registerBtn = this;
      const originalText = registerBtn.innerHTML;
      registerBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 注册中...';
      registerBtn.disabled = true;
      
      // 表单验证
      if(!name || !email || !password || !confirmPassword) {
        message.textContent = '请填写所有必填项';
        message.className = 'message error';
        message.style.display = 'block';
        registerBtn.innerHTML = originalText;
        registerBtn.disabled = false;
        return;
      }
      
      if(password !== confirmPassword) {
        message.textContent = '两次输入的密码不一致';
        message.className = 'message error';
        message.style.display = 'block';
        registerBtn.innerHTML = originalText;
        registerBtn.disabled = false;
        return;
      }
      
      if(password.length < 6) {
        message.textContent = '密码长度不能少于6位';
        message.className = 'message error';
        message.style.display = 'block';
        registerBtn.innerHTML = originalText;
        registerBtn.disabled = false;
        return;
      }
      
      // 模拟注册过程
      setTimeout(() => {
        message.textContent = '读者注册成功！即将自动登录';
        message.className = 'message success';
        message.style.display = 'block';
        
        // 自动填充登录表单并提交
        setTimeout(() => {
          // 填充读者登录表单
          document.getElementById('email').value = email;
          document.getElementById('password').value = password;
          
          // 显示读者登录表单
          switchRole('reader');
          showLoginForm('reader');
          
          // 触发读者登录
          setTimeout(() => {
            document.getElementById('readerLoginBtn').click();
          }, 500);
        }, 1500);
      }, 1200);
    });
    
    // 作者注册功能
    document.getElementById('authorRegisterBtn').addEventListener('click', function() {
      const name = document.getElementById('authorName').value;
      const email = document.getElementById('authorEmailReg').value;
      const password = document.getElementById('authorPasswordReg').value;
      const confirmPassword = document.getElementById('authorConfirmPassword').value;
      const bio = document.getElementById('authorBio').value;
      const message = document.getElementById('authorRegisterMessage');
      
      // 显示加载状态
      const registerBtn = this;
      const originalText = registerBtn.innerHTML;
      registerBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 注册中...';
      registerBtn.disabled = true;
      
      // 表单验证
      if(!name || !email || !password || !confirmPassword) {
        message.textContent = '请填写所有必填项';
        message.className = 'message error';
        message.style.display = 'block';
        registerBtn.innerHTML = originalText;
        registerBtn.disabled = false;
        return;
      }
      
      if(password !== confirmPassword) {
        message.textContent = '两次输入的密码不一致';
        message.className = 'message error';
        message.style.display = 'block';
        registerBtn.innerHTML = originalText;
        registerBtn.disabled = false;
        return;
      }
      
      if(password.length < 8) {
        message.textContent = '作者密码长度不能少于8位';
        message.className = 'message error';
        message.style.display = 'block';
        registerBtn.innerHTML = originalText;
        registerBtn.disabled = false;
        return;
      }
      
      // 模拟注册过程
      setTimeout(() => {
        message.textContent = '作者注册成功！即将自动登录';
        message.className = 'message success';
        message.style.display = 'block';
        
        // 自动填充登录表单并提交
        setTimeout(() => {
          // 填充作者登录表单
          document.getElementById('authorEmail').value = email;
          document.getElementById('authorPassword').value = password;
          
          // 显示作者登录表单
          switchRole('author');
          showLoginForm('author');
          
          // 触发作者登录
          setTimeout(() => {
            document.getElementById('authorLoginBtn').click();
          }, 500);
        }, 1500);
      }, 1200);
    });
  </script>
</body>
</html>